<template>
    <div class="container">
        <el-page-header content="推广支出情况"></el-page-header>
        <div class="e-m-t-45 e-m-b-45">
            <el-radio-group v-model="dataType">
                <el-radio-button label="0">收入支出汇总图</el-radio-button>
                <el-radio-button label="1">入库支出</el-radio-button>
                <el-radio-button label="2">出库销售汇总</el-radio-button>
                <el-radio-button label="3">提现金额情况汇总</el-radio-button>
                <el-radio-button label="4">推广支出情况</el-radio-button>
            </el-radio-group>
        </div>

        <div class="flex" style="justify-content: space-between;">
            <h4>推广奖励情况</h4>

            <el-form :inline="true" class="demo-form-inline xuan-box">
               <el-form-item label="用户类型">
                <el-select v-model="UserType" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                    </el-option>
                </el-select>
               </el-form-item>
                <el-form-item label="时间筛选">
                    <el-date-picker @change="time" :clearable="false" value-format="yyyy-MM-dd" v-model="value1"
                        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="expireTimeOPtion">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getList" type="primary">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <!-- <el-button @click="downloadwithdrawa()" type="primary" plain><i
                            class="iconfont icon-excel"></i>导出Excel</el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-descriptions title="汇总" direction="vertical" :column="5" border>
                <el-descriptions-item label="已获得用户数（个）">{{ promotionusercount }}</el-descriptions-item>
                <el-descriptions-item label="已获得总金额（元）">{{ amount }}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="e-m-t-80">
            <h4>明细</h4>
            <el-table :data="tableData" style="width: 100%" stripe border>
                <el-table-column fixed prop="promotionname" label="推广人" width="200">
                    <template slot-scope="scope">
                        <div style="cursor:pointer" @click="goview2(scope.row)">{{ scope.row.promotionname }}</div>
                    </template>
                </el-table-column>
                <el-table-column  prop="usertype" label="类型" width="200">
                </el-table-column>
                <el-table-column prop="username" label="来源">
                    <template slot-scope="scope" >
					<div @click="goview(scope.row)" style="cursor:pointer">
                        <span >{{ scope.row.username }} </span>
                    <span>--</span>
					<span >{{ scope.row.relationnumber }}</span>
                    <el-tag size="mini" v-if="scope.row.firstorder">首</el-tag>
                    </div>
				</template>
                </el-table-column>
                <el-table-column  prop="mobile" label="用户手机">
                </el-table-column>
                <el-table-column prop="createddatetime" label="完成时间" width="180">
                </el-table-column>
                <el-table-column prop="amount" label="推广佣金（元）" width="180">
                </el-table-column>
            </el-table>
            <div class="table-pagination">
                <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                    :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                    @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '推广支出情况' ,
        }
    },
    components: {},
    props: {},
    data() {
        return {
            options: [
                {
                id: 0,
                label: '全部'
                },       
                {
                id: 1,
                label: '用户'
                }, {
                id: 2,
                label: '客户组员'
                }, {
                id: 3,
                label: '小哥'
                }, 
                // {
                //   id: 4,
                //   label: '中转站'
                // }, {
                //   id: 5,
                //   label: '后台管理员'
                // },
                {
                id: 6,
                label: '业务员'
                },
                
            ],
            UserType: 0,//用户下拉
            key: '',
            page: 1,
            pageSize: 10,
            total: 0,
            promotionusercount: 0,
            timeType: 0,//时间类型
            value1: "",//下单时间
            startdate: "",//下单初始
            enddate: "",//下单结束
            dataType: 4,
            tableData: [],
            amount: 0,
            expireTimeOPtion: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的 
                }
            }
        };
    },
    watch: {
        dataType(val) {
            console.log(val)
            if (val == 0) {
                this.$router.push({
                    path: '/finance/statistics'
                })
            } else if (val == 1) {
                this.$router.push({
                    path: '/finance/receipt/receipt'
                })
            } else if (val == 2) {
                this.$router.push({
                    path: '/finance/receipt/outbound'
                })
            } else if (val == 3) {
                this.$router.push({
                    path: '/finance/receipt/cash'
                })
            } else if (val == 4) {
                this.$router.push({
                    path: '/finance/receipt/promotion'
                })
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        goview(item){
            this.$router.push(`/order/user/Views?id=${item.relationid}`)
            
        },
        goview2(item){
            // this.$router.push(`/order/user/Views?id=${item.promotionuserid}`)
            console.log(item)
            if(item.usertype == '用户'){
            this.$router.push(`/user/views?id=${item.promotionuserid}`)
                
            }
            if(item.usertype == '客户组员'){
            this.$router.push(`/Enterprise/views?id=${item.promotionuserid}`)
                
            }
            
            if(item.usertype == '业务员'){
            this.$router.push(`/sales/commission?id=${item.promotionuserid}`)
                
            }
            if(item.usertype == '小哥'){
            this.$router.push(`/distribution/views?id=${item.promotionuserid}`)
                
            }
            
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        },
        getList() {
            this.$axios.post('/Admin/Statistics/CommissionPay', {
                "PageIndex": this.page,
                "PageSize": this.pageSize,
                "Key": this.key,
                "start": this.startdate,
                "end": this.enddate,
                "timeType": this.dataType,
                "UserType":this.UserType
            }).then((res) => {
                this.loading = false
                this.tableData = res.rows;
                this.amount =res.amount
                this.total = res.total;
                this.promotionusercount = res.promotionusercount
            })
        },
        downloadwithdrawa() {
            // this.$axios.post('/admin/statistics/billwithdrawaldownload', {
            //     "start": this.startdate,
            //     "end": this.enddate,
            //     "timeType": this.timeType,

            // }, {
            //     responseType: 'blob'
            // }).then(res => {
            //     console.log(res)
            //     let content = res;
            //     let fileName = '成功提现金额.xlsx'
            //     this.utils.saveAndExport(content, fileName)
            // })
        },
        time(e) {
            console.log(e)
            this.startdate = e[0]
            this.enddate = e[1]
            this.dataType = 4

        }
    }
};
</script>
<style lang="scss" scoped></style>